import {SkillBarInterface} from "../../interface/GuiInterface";
import * as React from "../../../script/frame/apiModel/gui/React";
import {IProps, SyncId, UISyncData, View} from "../../../script/frame/apiModel/gui/React";
import {GuiKeys} from "../../../script/controller/model/ControllerOpt";
import Configer from "../../../script/frame/apiModel/config/Configer";
import {ResourceKey} from "../../../script/constant/ResourceConstant";
import {AbilityJson} from "../../../script/frame/apiModel/model/StoreJson";
import {PlayerModel} from "../../../script/frame/apiModel/adapterModel/model4/PlayerModel";
import {PlayerFactory} from "../../../script/frame/PlayerFactory";
import {DataRouter} from "../../../script/frame/dataSource/DataRouter";
import {CodeUtil} from "../../../script/frame/codeAdapter/CodeUtil";
import {FinalKey} from "../../../script/constant/FinalConstant";
import UnitUtil from "../../../script/utils/UnitUtil";
import {ColorStr} from "../../../script/type/Type";
import {publicGui} from "../../interface/PublicGui";
import {DataRouterUtil} from "../../../script/utils/router/DataRouterUtil";

export interface IProp {
    getAbilitysFun: (player: PlayerModel) => { abilitys: { [key: string]: AbilityJson }, achs: { [key: string]: number }, cr: number, magicValue: number };
}
export interface IState {
    skillInfos: { [key: string]: AbilityJson };
    achs: { [key: string]: number };
    cr: number;
    magicValue: number;

    title: string;
    subTitle: string;
    des: string
    infoVisible: boolean;
    x: number;
    y: number;
}

export default class SkillBar extends SkillBarInterface<IProp, IState> {
    constructor(props: IProps & IProp) {
        super(props);
        this.state = {
            visible: true,
            skillInfos: {},
            achs: {},
            cr: 0,
            magicValue: 0,

            infoVisible: false,
            title: "",
            subTitle: '',
            des: '',
            x: 0,
            y: 0,
        }
    }

    render = () => {
        const skillItemBoard = Configer.getResource(ResourceKey.skillItemBoard);
        const skillItemBack = Configer.getResource(ResourceKey.skillItemBack)
        const disableBlp = Configer.getResource(ResourceKey.disableBlp)
        const itemSize = { h: 0.0705, w: 0.0458 }
        const skillHotKeys: string[] = Configer.getFinal(FinalKey.skillHotKeys);
        const maxSkillNum = skillHotKeys.length;

        const skillItems: AbilityJson[] = [];
        for (let i = 0; i < maxSkillNum; i++) {
            const hotKey = skillHotKeys[i];
            const skillInfo = this.state.skillInfos[hotKey];
            if (skillInfo) {
                skillItems.push(skillInfo)
            } else {
                skillItems.push({ id: '', cd: 0, lv: 0 })
            }
        }

        const backWidth = itemSize.w * maxSkillNum;

        const padding = { l: 0.009, t: 0.009 };
        const itemBackSize = { w: 0.029, h: 0.048 };

        return <View   key={GuiKeys.skillBar} style={{ width: backWidth, height: itemSize.h, left: 0.484, top: 0.882 }}>
            {
                skillItems.map((item, index) => {
                    let icon = '';
                    let name = '';
                    let subTitle = '';
                    let des = '';
                    let cool = 0;
                    let height = itemBackSize.h;
                    let maxValue = 0;
                    let cost = 0;
                    let disable = false;
                    let key = '';

                    if (!CodeUtil.isNullOrZero(item.id)) {
                        const abilityData = DataRouter.getAbilityDataById(item.id);
                        if (abilityData) {
                            icon = DataRouterUtil.getIconUrlByIconData(abilityData);
                            if (abilityData.Name) {
                                name = abilityData.Name;
                            }
                            if (abilityData.Ubertip) {
                                des = abilityData.Ubertip;
                            }
                            if (!CodeUtil.isNullOrZero(abilityData.coolDown)) {
                                maxValue = abilityData.coolDown;
                            }

                            key = abilityData.key;

                            if (!CodeUtil.isNullOrZero(abilityData.Cost)) {
                                cost = abilityData.Cost;
                            }

                            const requiredAchs = abilityData.requiredAchs;
                            if (requiredAchs) {
                                const requiredAchArr = CodeUtil.getArrBySplit(requiredAchs);
                                for (let i = 0; i < requiredAchArr.length; i++) {
                                    const requiredAch = requiredAchArr[i];
                                    const achNum = this.state.achs[requiredAch];
                                    if (!CodeUtil.isNullOrZero(achNum)) {
                                    } else {
                                        disable = true;
                                        const achData = DataRouter.getAchievementDataByAchievementId(requiredAch);
                                        const name = achData?.name ? achData.name : `未命名成就${requiredAch}`;
                                        subTitle = subTitle + CodeUtil.getColorStr(ColorStr.red, `需要:${name}`);
                                    }
                                }
                            }
                        }
                    }

                    maxValue = UnitUtil.getCoolDown(this.state.cr, maxValue);

                    if (!CodeUtil.isNullOrZero(item.cd) && item.cd > 0) {
                        cool = item.cd;
                    }

                    if(disable) {
                    } else {
                        if (cool > 0 && maxValue > 0) {
                            height = (height * cool) / maxValue;
                        } else {
                            height = 0.0001;
                        }
                        if (this.state.magicValue >= cost) {
                            if (maxValue > 0) {
                                subTitle = `冷却:${maxValue} 蓝耗:${cost}`
                            } else if (maxValue === 0) {
                                subTitle = `蓝耗:${cost}`
                            } else {
                                subTitle = `被动`
                            }
                        } else {
                            subTitle = CodeUtil.getColorStr(ColorStr.red, `法力值不足`)
                        }
                    }

                    return <View   key={`${GuiKeys.skillBarItem}|${index}`} style={{ width: itemSize.w, height: itemSize.h }}>
                        <View   key={`${GuiKeys.skillBarFrame}|${index}`} style={{ backgroundImage: icon, border: skillItemBack, width: itemBackSize.w, height: itemBackSize.h, float: true, marginL: padding.l, marginT: padding.t }}></View>
                        <View   key={`${GuiKeys.skillBarMask}|${index}`} style={{ backgroundImage: disableBlp, width: itemBackSize.w, height: height, float: true, marginL: padding.l, marginT: padding.t }}></View>
                        <View   key={`${GuiKeys.skillBarMaskKey}|${index}`} style={{ width: itemBackSize.w, height: itemBackSize.h / 2, float: true, marginL: padding.l + 0.003, marginT: padding.t, color: ColorStr.yellow }}>{key}</View>
                        {/*<View   key={`${GuiKeys.skillBarMaskNum}|${index}`} style={{ hidden: (cool <= 0), width: itemBackSize.w, height: itemBackSize.h / 2, float: true, marginL: padding.l, marginT: padding.t + (itemBackSize.h / 2), fontAlign: TextAlign.behind }}>{cool}</View>*/}
                        <View   key={`${GuiKeys.skillBarImage}|${index}`}  stopEvent={true} onMouseDown={(event) => { return this.showAbilityEffect(key) }} onMouseEnter={(event) => { this.openInfo(name, subTitle, des, event.x, event.y) }} onMouseLeave={() => {this.closeInfo()}}  style={{ backgroundImage: skillItemBoard, width: itemSize.w, height: itemSize.h, float: true }}></View>
                    </View>
                })
            }
        </View>
    }

    showAbilityEffect = (key: string) => {
        const syncData: UISyncData = { id: SyncId.useAbility, param: { key: key } };
        return syncData;
    }

    openInfo = (title: string, subTitle: string, des: string, x: number, y: number) => {
        if (!CodeUtil.isNullOrZero(title)) {
            publicGui.showInfoPage(x, y, title, subTitle, des);
        }
    }

    closeInfo = () => {
        publicGui.closeInfoPage()
    }

    openBar= () => {
        const ret = this.props.getAbilitysFun(PlayerFactory.getInstance().getLocalPlayer())
        const abilitys = JSON.parse(JSON.stringify(ret.abilitys));
        const achs = JSON.parse(JSON.stringify(ret.achs));
        const cr = ret.cr;
        const magicValue = ret.magicValue;
        this.setState({
            ... this.state,
            skillInfos: abilitys,
            achs: achs,
            cr,
            magicValue
        })
    }

    getVisible = () => {
        return this.state.visible;
    }
}